﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>江永有本书【内测版】</title>
    <style>
        *{   /*初始化*/
            margin:0;
            padding:0;
            list-style:none;
            text-decoration:none;
        }
        .main {
            width: 1300px;
            margin: auto;
        }
        .begin,.menu,.countainer,.ending{
            float:left;
            width:100%;
            box-sizing:border-box;
        }
        .begin {
            height: 260px;
            padding: 50px;
            font-size: 40pt;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            /*line-height: 260px;*/
            text-align: center;
            background: #f0ebe5;
        }
        .menu {
            height: 40px;
            background: linear-gradient(#ececea,#e0e5df);
        }
        .map {
            width: 1500px;
            /*margin: auto;*/
        }
        .map li {
            height: 40px;
            width: 200px;
            float: left; /*通过左浮动，让列表变成横排*/
        }
        .map a{
            color: #000;
            font-size:15px;
            padding:10px 20px;
            display:inline-block;
        }
        .map a:hover{
            background:#e0e5df;
            color:#8696a7;
        }
        .countainer {
            text-align: center;
            background:#e0e5df;
        }
        .ending{

        }
        .lside{
            width:200px;
            float:left;
        }
        .rside {
            width: 200px;
            float: right;
        }
        .inside{
            margin:0px 250px;
        }
        .lside,.rside,.inside{
            padding:10px;
        }
        .ending {
            padding: 10px;
            background: linear-gradient(#e0e5df,#ececea);
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="main">
        <div class="begin">  <!--开头盒子-->
            <h1>走进非遗女书</h1>
            <p style="font-size:20px;">欢迎光临我们的网页，让我们一起传播女书，传承女书，发展女书吧~</p>
        </div>
        <div class="menu">   <!--导航栏盒子-->
            <ul class="map">
                <li><a href="index.html">首页</a></li>
                <li><a href="xing.html">女书之形</a></li>
                <li><a href="voice.html">女书之声</a></li>
                <li><a href="tu.html">图案设计</a></li>
                <li><a href="chan.html">产品介绍</a></li>
                <li><a href="us.html">关于我们</a></li>
            </ul>
        </div>
        <div class="countainer"> <!--主体盒子-->
            <div class="lside"> <!--左边盒子-->
                <h2>欢迎词及介绍</h2>
                <p>
                    我是左边栏的内容我是左边栏的内容
                    我是左边栏的内容我是左边栏的内容
                    我是左边栏的内容我是左边栏的内容
                    我是左边栏的内容我是左边栏的内容
                    我是左边栏的内容我是左边栏的内容
                </p>
            </div>
            <div class="rside">  <!--右边盒子-->
                <h2>通知栏</h2>
                <p>
                    我是右边栏的内容我是左边栏的内容
                    我是右边栏的内容我是左边栏的内容
                    我是左边栏的内容我是左边栏的内容
                    我是左边栏的内容我是左边栏的内容
                    我是左边栏的内容我是左边栏的内容
                </p>
            </div>
            <div class="inside">  <!--中间盒子-->
                <h2>我是中间栏</h2>
                <p>
                    我是中间栏的内容我是左边栏的内容
                    我是左边栏的内容我是左边栏的内容
                    我是左边栏的内容我是左边栏的内容
                    我是左边栏的内容我是中间栏的内容
                    我是左边栏的内容我是左边栏的内容
                </p>
            </div>
        </div>
        <div class="ending">
            <hr>
            <p>我也是有底线的~</p>
        </div>
    </div>
    
</body>
</html>